<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Blogs/详情</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/css/details.css}"/>
    <link rel="stylesheet" th:href="@{/lib/typo/typo.css}"/>
    <link rel="stylesheet" th:href="@{/lib/prism/prism.css}"/>
    <link rel="stylesheet" th:href="@{/lib/tocbot/tocbot.css}">
</head>
<body>

<div th:replace="commons/bar::#header"></div>

<div style="margin-bottom: 50px;" id="app">

    <div class="container container_main list-group-item">
        <div class="neirong_bottom">
            <img src="files/erweima.jpg" class="img-rounded left-img"/>
            <span>{{blogs.user.username}}</span>
            更于
            <span>{{blogs.time}}</span>
            浏览
            <span>{{blogs.browse==null?0:blogs.browse}}</span>
            <span class="navbar-right">博客/正文</span>
        </div>
        <div class="text-center">
            <img class="logo_img img-thumbnail" :src="blogs.path"/>
        </div>
    </div>



    <div class="muluDiv list-group-item " >
        <ol class="js-toc">
        </ol>
    </div>

    <div id="weixin" class="img-thumbnail">
    </div>

    <div class=" fixed_right_bottom">
        <div class="label label-success right mulu"><a>目录</a></div>
        <div class="label label-success liuyan"><a href="#details_comment">留言</a></div>
        <div class="label label-info weixin"><a><i class="glyphicon glyphicon-apple"></i></a></div>
        <div class="label label-info toTop"><a><i class="glyphicon glyphicon-chevron-up"></i></a></div>
    </div>


    <div class="container container_main list-group-item">
        <div class="navbar-right">
            <span class="label label-info">原创 </span>
        </div>

        <div style="font-weight: bold; text-align: center;" >
            <h1>{{blogs.title}}</h1>
        </div>

        <!-- 主要内容 -->
        <div id="content" class="navbar body typo typo-selection js-toc-content" v-html="blogs.content" >
        </div>

        <div class="text-center">
            <a class=" btn" id="admire">赞赏</a>
        </div>
    </div>
    <div class="container container_main list-group-item ">
        <div class="navbar-left banquan">
            作者：<span>{{blogs.user.username}}</span><br>
            发表时间：<span>{{blogs.time}}</span><br>
            版权申明：<span>自由转载-非商用-保持署名</span><br>
        </div>
        <div class="navbar-right ">
            <img src="files/erweima.jpg" class="img-rounded geren_img"/>
        </div>
    </div>
    <div class="container container_main list-group-item " id="details_comment">
        <div class="list-group-item">
            <h4 style="border-bottom: #5bc0de 1px solid; font-weight: bold;line-height: 25px; color:#5bc0de;">Comments</h4>
            <div>
                <div style="margin: 15px 0;" v-for="(comment,index) in blogs.commentList">
                    <div>
                        <img class="navbar-left img-thumbnail" th:src="@{/images/erweima.jpg}" style="width: 40px;height: 40px;"/>
                    </div>
                    <div style="padding-left: 45px;">
                        <span style="font-size: 16px;font-weight: bold; display: block;">{{comment.name}}<span style="font-size: 14px;font-weight: 100;margin-left: 20px;">{{comment.date}}</span></span>
                        <span style="font-size: 14px;font-weight: 300; display: block;">{{comment.content}}</span>
                        <a style="color: #5bc0de;text-decoration: none; margin: 5px 0" @click.prevent="reply(comment.id,comment.name)">回复</a>
                        <div>
                            <div v-for="(childComment,index2) in comment.childComment">
                                <img class="navbar-left img-thumbnail" th:src="@{/images/erweima.jpg}" style="width: 40px;height: 40px;"/>
                                <div style="padding-left: 45px;">
                                    <span style="font-size: 16px;font-weight: bold; display: block;">{{childComment.name}}<span style="margin: 0 5px; color: #5cb85c;" v-text="aite(childComment.content)"></span><span style="font-size: 14px;font-weight: 100;margin-left: 20px;">{{childComment.date}}</span></span>
                                    <span style="font-size: 14px;font-weight: 300; display: block;" v-text="content(childComment.content)"></span>
                                    <a style="color: #5bc0de;text-decoration: none; margin: 5px 0" @click.prevent="reply(comment.id,childComment.name)">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <form id="details_form" class="form-inline form_div">
            <input type="text" v-model="comment.blogsId" class="form-control" >
            <input type="text" v-model="comment.parentId" class="form-control" >
            <textarea class="form-control" id="commentContent" style="display: block; width: 100%;margin-bottom: 20px;" rows="5" placeholder="想对博主说些什么"></textarea>
            <div class="form-group">
                <label class="sr-only">用户名</label>
                <input type="text" v-model="comment.name" class="form-control"  placeholder="用户名">
            </div>
            <div class="form-group">
                <label class="sr-only" >邮箱</label>
                <input type="email" v-model="comment.email" class="form-control"  placeholder="邮箱">
            </div>
            <button type="button" @click.prevent="commentBlogs" class="btn btn-default" >发送</button>
            <button type="button" @click.prevent="disReply" id="disReply" style="display: none;" class="btn btn-default" >取消回复</button>
        </form>
    </div>

</div>

<div th:replace="commons/bar::#footer"></div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/lib/tocbot/tocbot.js}"></script>
<script th:src="@{/lib/prism/prism.js}"></script>
<script th:src="@{/js/qrcode.min.js}"></script>
<script th:src="@{/js/jquery.scrollTo.min.js}"></script>


<script type="text/javascript">



    var vue = new Vue({
        el:"#app",
        data(){
            return {
                blogs:{
                    user:{},
                    blogsTagList:[],
                    blogsClassifieList:[],
                    commentList:[
                        {
                            childComment:[]
                        }
                    ]
                },
                comment:{
                    parentId:null,
                }
            }
        },
        methods:{
            ajax:function(method,url,data,back){
                $.ajax({
                    type:method,
                    url:url,
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    data:data,
                    success:function (res) {
                        back(res);
                    },
                    error:function(res){
                        console.log(res);
                        if(method!="get"){
                            alert(" alert(\"数据加载出现错误！\")")
                        }
                    }
                })
            },
            getParameter:function(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if( r != null ) return decodeURI( r[2] ); return null;
            },
            prism:function(){
                var that = this;
                var index = 0;
                var timed = setInterval(function(){
                    if(that.blogs.title!=undefined){
                        // that.blogs.content.replaceAll("&amp;","&")
                        Prism.highlightAll();
                        clearInterval(timed);
                    }
                    if(index==10){
                        clearInterval(timed);
                    }
                    index++;
                },100);
            },
            content:function(content){
                if(content[0]=="@"){
                    return content.substring(content.indexOf(" "))
                }else{
                    return content
                }
            },
            aite:function(content){
                if(content[0]=="@"){
                    return content.substring(0,content.indexOf(" "))
                }else{
                    return "  "
                }
            },
            reply:function(id,name){
                $("#commentContent").attr("placeholder","@"+name+"  ");
                this.comment.parentId = id;
                $("#disReply")[0].style.display="inline-block";
            },
            emailValidate:function(){
                var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
                return reg.test(this.comment.email);
            },
            commentBlogs:function(){
                var name = this.comment.name;
                if(name!=null&&name!=""&&name.indexOf(" ")==-1&&this.emailValidate()){
                    this.comment.content = $("#commentContent").attr("placeholder")+"  "+$("#commentContent").val();
                    var that = this;
                    this.ajax("post","/blogs/comment",JSON.stringify(this.comment),function(res){
                        that.blogs.commentList = res;

                        $("#disReply")[0].style.display="none";
                        that.comment.parentId = null;
                        $("#commentContent").val("");
                        that.comment.name = null;
                        that.comment.email = null;
                    })
                }else{
                    alert("请填写用户名和邮箱")
                }
            },
            disReply:function(){
                $("#commentContent").attr("placeholder","想对博主说些什么");
                this.comment.parentId = null;
                $("#disReply")[0].style.display = "none";
            }
        },
        created(){

            var active = this.getParameter("active");
            if(active==null){
                return;
            }
            this.comment.blogsId = active;
            var that = this;
            this.ajax("get","/blogs/blogs/details/"+active,null,function(res){
                that.blogs = res;
                that.prism();
            })

        }
    })

    $('#admire').popover({
        trigger : 'hover',//鼠标以上时触发弹出提示框
        placement: "bottom",
        dataContainer: "body",
        html:true,//开启html 为true的话，data-content里就能放html代码了
        content:"<div><img src='images/erweima.jpg' class='img-rounded geren_img'></div>"
    });

    function each(name,callback){
        $("#content").find(name).each(callback);
    }

    $(function(){
        each("h1",function(index){
            $(this).attr("id","h1-"+index);
        });
        each("h2",function(index){
            $(this).attr("id","h2-"+index);
        });
        each("h3",function(index){
            $(this).attr("id","h3-"+index);
        });
        each("a",function(){
            if ($(this).attr("target") !== "_blank") {
                $(this).attr('target', '_blank');
            }
        })
        // 创建目录
        tocbot.init({
            // 在哪里呈现目录。
            tocSelector: '.js-toc',
            // 获取标题以构建目录的位置。
            contentSelector: '.js-toc-content',
            // 在contentSelector元素中抓取哪些标题。
            headingSelector: 'h1, h2, h3',
            // 用于内容内相对或绝对定位容器内的标题。
            hasInnerContainers: true,
        });

    })



    hovers(".mulu",".muluDiv");
    hovers(".muluDiv",".muluDiv");
    hovers(".weixin","#weixin")

    //鼠标移上去，显示出目录
    function hovers(clazz,clazz2){
        $(clazz).hover(function(){
            $(clazz2).show();
        },function(){
            $(clazz2).hide();
        });
    }

    //生成二维码
    var qrcode = new QRCode("weixin", {
        text: window.location.toString(),
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });

    //滑动到顶部
    $(".toTop").click(function(){
        $(window).scrollTo(0,500);
    })



</script>



</body>
</html>